<template>
  <div class="detail-page">
    <van-nav-bar
      title="文章详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <header class="header">
      <h1>{{ item.title }}</h1>

      <p>
        <img :src="item.content" alt="" class="touxiang" />
        <span>{{ item.author }}</span>
      </p>
      <p>点赞（{{ item.click }}）|| 收藏（{{ item.lovenum }}）</p>

      <p>
        {{ item.description }}
        <img
          :src="'http://124.223.14.236:8060/' + item.pic"
          height="200px"
          width="200px"
        />
      </p>
    </header>

    <van-tabbar>
      <van-tabbar-item
        icon="star-o"
        :class="{ active: item.isCollect }"
        @click="updateCollect"
      ></van-tabbar-item>
      <van-tabbar-item
        icon="good-job"
        :class="{ active: item.isLike }"
        @click="updateLike"
      ></van-tabbar-item>
      <van-tabbar-item icon="share"></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { DetailListAPI, LikeAndScAPI } from '@/api/article'
export default {
  name: 'detail-page ',
  data () {
    return {
      item: {}
      // article_id: id
    }
  },
  async created () {
    const { data: res } = await DetailListAPI(this.$route.params.id)
    // console.log(res)
    this.item = res.data.info
  },
  methods: {
    // 点赞
    async updateLike () {
      const { data: res } = await LikeAndScAPI({
        action: this.action,
        article_id: this.item.id,
        token: localStorage.getItem('ydd-token'),
        type: 2
      })
      console.log(res)
      this.item.isLike = !this.item.isLike
      if (this.item.isLike) {
        this.action = 'add'
        this.item.click++
        this.$toast.success('点赞成功')
      } else {
        this.action = 'del'
        this.item.click--
        this.$toast.success('取消点赞')
      }
    },
    // 收藏
    async updateCollect () {
      const { data: res } = await LikeAndScAPI({
        action: this.action,
        article_id: this.item.id,
        token: localStorage.getItem('ydd-token'),
        type: 1
      })
      console.log(res)
      this.item.isCollect = !this.item.isCollect
      if (this.item.isCollect) {
        this.action = 'add'
        this.item.lovenum++
        this.$toast.success('收藏成功')
      } else {
        this.action = 'del'
        this.item.lovenum--
        this.$toast.success('取消收藏')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail-page {
  overflow: hidden;
  padding: 0 15px;
  .header {
    h1 {
      font-size: 24px;
    }
    p {
      display: flex;
      align-items: center;
      .touxiang {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
}
.active {
  color: aqua;
}
</style>
